<template>
    <div class="customerSea">
        <el-card shadow="never">
            <div class="seaTitle">
                <div class="tabs">
                    <el-tabs v-model="seaActiveIndex" @tab-click="tabClick">
                        <el-tab-pane
                            v-for="(item, index) in seaids"
                            :key="item.id"
                            :label="item.name"
                            :name="index.toString()">
                            <!-- <tab-pane-item v-if="seaActiveIndex == index.toString()" :seaId="item.id" :seaName="item.name" /> -->
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="btns">
                    <el-button @click="toOtherImport">第三方接入</el-button>
                    <el-button @click="router.push('/customer/clubManage/commonSea')">公海管理</el-button>
                </div>
            </div>
            <div class="seaContent">
                <tab-pane-item v-if="randomKey" :key="randomKey" :sea-id="seaId" :sea-name="seaName" />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import tabPaneItem from './components/tabPaneItem.vue';
import { seaList } from '@/api/customer/clubManage/commonSea';
import router from '@/router';

type SeaType = {
    name: string;
    id: number;
    [propName: string]: any;
};
const seaids = reactive<SeaType[]>([]);
const seaActiveIndex = ref<string>('0');
const isAbleToGo = ref<boolean>(false);

const randomKey = ref<string>('');
const seaId = ref<string | number>();
const seaName = ref<string>();

const seaActiveId = computed<string | number>(() => {
    return seaids[Number(seaActiveIndex.value)].id;
});

const getSeaList = () => {
    seaList({ page: 1, page_size: 1000, is_not_list: 1 }).then((res: any) => {
        seaids.push(...res.data);
        seaId.value = res.data[0]?.id;
        seaName.value = res.data[0]?.name;
        randomKey.value = getRandomKey();
    });
};
getSeaList();

const tabClick = (pane: any): void => {
    const { index } = pane;
    seaId.value = seaids[Number(index)].id;
    seaName.value = seaids[Number(index)].name;
    randomKey.value = getRandomKey();
};

const toOtherImport = () => {
    router.push('/customer/clubManage/clubSea/otherImport?seas_id=' + seaActiveId.value);
    // if(!!seaids.length){
    //   router.push('/customer/clubManage/clubSea/otherImport?seas_id=' + seaActiveId)
    // }else if(isAbleToGo.value){
    //   router.push('/customer/clubManage/clubSea/otherImport?seas_id=' + seaActiveId)
    // }else{
    //   isAbleToGo.value = true
    // }
};

const getRandomKey = (num?: number): string => {
    const t = 'ABCDEFGHJKMNPQRSTWXYZ0123456789abcdefhijkmnprstwxyz?_*%$#';
    let total = '';
    let n = 0;
    if (typeof num === 'number' && num > 0 && num < 21) {
        while (n < num) {
            const add = t[Math.round(Math.random() * Number(t.length - 1))];
            total = `${total}${add}`;
            n++;
        }
    } else {
        total = getRandomKey(16);
    }
    return total;
};
</script>
<style scoped lang="scss">
:deep(.el-card__body) {
    padding: 0px 24px 24px;
}
.customerSea {
    :deep(.el-card__body) {
        .seaTitle {
            position: relative;
            width: 100%;
            margin-bottom: 20px;
            .tabs {
                width: 100%;
                flex: 1;
                .el-tabs__header {
                    margin: 0;
                    border-bottom: 1px solid #eaeaea;
                }
                .el-tabs__nav-wrap {
                    margin-right: 230px;
                    &::after {
                        content: none;
                    }
                }
                .el-tabs__nav-next,
                .el-tabs__nav-prev {
                    line-height: 56px;
                }
                .el-tabs__item {
                    height: 56px;
                    line-height: 56px;
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #969696;
                    &.is-active {
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ff6b00;
                    }
                }
            }
            .btns {
                position: absolute;
                right: 0;
                top: 12px;
            }
        }
    }
}
</style>
